<template>
	<view class="content-box ss-p-y-30">
		<view v-if="showTitle" class="goods-title">{{ state.goodsinfo.title }}</view>
		<uni-collapse accordion v-model="state.openedItem">
			<template v-for="(item, index) in state.zhangjielist" :key="index">
				<view v-if="item.children.length <= 0" class="course title-slot">
					<view class="item-content ss-flex-1">
						<view class="item-title">
							<view>{{item.name}}</view>
							<view class="time">
								<view>{{ (Array.isArray(item.question)) ? item.question.length : 0 }} 题</view>

							</view>
						</view>
            <view class="practice-btn" v-if="item.user_answer_record=='unstart'" @tap="navigatorToDati(item)">开始练习</view>
            <view class="practice-btn" v-if="item.user_answer_record=='undone'" @tap="navigatorToDati(item)">继续练习</view>
            <view class="practice-btn report" v-if="item.user_answer_record=='done'" @tap="navigatorToDatiReport(item)">答题报告</view>
					</view>
				</view>
				<uni-collapse-item
					v-else
					class="skuItem"
					:class="{'is-open': state.openedItem === item.id}"
					:title="''"
					:name="item.id" 
					@tap="firstClick(item)">
					<template #title> <!-- 假设支持具名插槽 -->
						<view class="title-slot">
							<!-- <view class="line"></view> -->
							<view class="courstitle">
								<view>{{ item.name }}</view>
							</view>
							<view class="coursenum" v-if="item.children.length>0">{{item.children.length}}节</view>
							<view class="coursenum" v-else>
								{{ (Array.isArray(item.question)) ? item.question.length : 0 }} 题
							</view>
						</view>
					</template>
					<view class="content">
						<!-- 垂直线条 -->
						<view class="vertical-line"></view>
						<!-- 条目列表 -->
						<view class="item-list">
							<view v-for="(item1, index1) in item.children" :key="index" class="course">
								<view class="item-dot">
									•
								</view>
								<view class="item-content">
									<view class="item-title">
										<view>{{item1.name}}</view>
										<view class="time">
											<view>{{ (Array.isArray(item1.question)) ? item1.question.length : 0 }} 题</view>

										</view>
									</view>
                  <view class="practice-btn" v-if="item1.user_answer_record=='unstart'" @tap="navigatorToDati(item1)">开始练习</view>
                  <view class="practice-btn" v-if="item1.user_answer_record=='undone'" @tap="navigatorToDati(item1)">继续练习</view>
                  <view class="practice-btn report" v-if="item1.user_answer_record=='done'" @tap="navigatorToDatiReport(item1)">答题报告</view>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</template>
		</uni-collapse>
		<s-userpaid-card :isVisible="state.isBuyVisible" :goodsInfo="state.goodsinfo"  @close-clicked="handleClose" />
	</view>
</template>


<script setup>
	import {
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';

	const props = defineProps({
		id: {
			type: String,
			default: ''
		},
		goods_id: {
			type: String,
			default: ''
		},
		showTitle: {
			type: Boolean,
			default: false
		}
	});

	const emit = defineEmits(['update-detail']);

	// 数据
	const state = reactive({
		openedItem: '',
		paid_auth: false,
		isBuyVisible: false,
		tiku_id: '',
		zhangjielist: [],
		goodsinfo:{},
	});

	onMounted(async () => {
		if (state.goodsinfo.id) {
			return;
		}
		sheep.$api.tiku.getZhangjieById({
			'id': props.id,
			'goods_id': props.goods_id,
		}).then((res) => {
			if (res.code === 1) {
				state.paid_auth = res.data.paid_auth;
				state.goodsinfo = res.data.goodsinfo;
				state.tiku_id = res.data.tikuinfo.id;
				state.zhangjielist = res.data.tikucontent;
				emit('update-detail', res.data);

				state.zhangjielist.forEach(item => {
					if (item.children.length > 0) {
						item.children.forEach(item1 => {
							updateUserAnswerRecord(item1);
						});
					} else {
						updateUserAnswerRecord(item);
					}
				});
			}
		})
	});

	function updateUserAnswerRecord(item) {
		const storageKey = `${state.tiku_id}-${item.id}`
		if (item.user_answer_record !== 'done') {
			if (uni.getStorageSync(storageKey)) {
				item.user_answer_record = 'undone';
			} else {
				item.user_answer_record = 'unstart';
			}
		}
	}

	function navigatorToDati(item) {
		if(state.paid_auth){
			if (item.question.length == 0) {
				sheep.$helper.toast("暂无试题");
				return;
			} else {
				sheep.$router.go('https://weike.jhpress.com/tk/#/pages/paper/paper?id=' + item.id + '&tikuid=' + state.tiku_id);
				// sheep.$router.go('http://localhost:8080/h5/tk/#/pages/paper/paper?id=' + item.id + '&tikuid=' + state.tiku_id);
			}
		}else{
			state.isBuyVisible = true
		}
	}

  function navigatorToDatiReport(item){
    sheep.$router.go('https://weike.jhpress.com/tk/#/pages/paper/report?grade_id='+item.user_answer_grade+'&id=' + item.id + '&tikuid=' + state
      .tiku_id + '&goods_id=' + state.goodsinfo.id);
    // sheep.$router.go('http://localhost:8080/weixin/tk/#/pages/paper/report?grade_id='+item.user_answer_grade+'&id=' + item.id + '&tikuid=' + state
    //   .tiku_id + '&goods_id=' + state.goodsinfo.id);
  }


	function firstClick(item) {
		if (item.children.length == 0) {
			if (item.question.length == 0) {
				sheep.$helper.toast("暂无试题");
				return;
			} else {
				navigatorToDati(item);
			}
		}
	}
	
	function handleClose() {
		state.isBuyVisible = false;
	};
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.goods-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		padding-bottom: 15px;
	}

	.uni-collapse {
		background: none;
	}

	.content-box-wrapper {
		display: flex;
		gap: 10px;
	}

	.content-box {
		flex-grow: 1;
		padding: 15px;
		border-radius: 10px;
		box-sizing: border-box;


		.skuname {
			font-size: 16px;
			font-weight: bold;
			color: #000000;
			padding-left: 5px;
		}

		.skuItem {
			background-color: #FFFFFF;
			margin-top: 10px;
			border-radius: 8px;
			padding-left: 10px;
			padding-bottom: 20px;
			color: #333333;

			&.is-open {
				color: #ff6000;
			}
		}

		.content {
			width: 100%;
			font-size: 18px;
			font-weight: 400;
			color: #333333;
			display: flex;
			align-items: flex-start;
			/* 确保线条和条目顶部对齐 */
			position: relative;

		}

		.practice-btn {
			color: #fff;
			height: 30px;
			font-size: 14px;
			font-weight: 500;
			padding: 5px 10px;
			border-radius: 4px;
			background: #ff6000;
		}
    .report{
      border: 1px solid #ff6000;
      background: none;
      color: #ff6000;
    }

		.course {
			padding: 10px 0;

			span {
				color: grey;
			}

			.item-dot {
				position: absolute;
				left: 6px;
				color: #f88a04;
				padding: 2px;
			}

			.item-content {
				display: flex;
				justify-content: space-between;
				gap: 10px;
			}

			.item-title {
				font-size: 16px;
				font-weight: 500;
				line-height: normal;
				padding-right: 10px;
			}

			.item-title .time {
				color: #9fa3a2;
				font-size: 14px;
				margin-top: 12px;
				display: flex;
				justify-content: space-between;
			}

			.rightbuttons {
				width: 120rpx;
				color: #9fa3a2;
				font-size: 12px;
			}

			.item-shiting {
				width: 120rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 14px;
				border-radius: 40rpx;
				background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
				color: $white;

			}

			.learnpercent {
				text-align: center;
				color: #9fa3a2;
				font-size: 12px;
				margin-top: 2px;
			}

			.tag-content {
				flex: 1;
				min-width: 0;
				white-space: nowrap;
			}

			.tag-box {
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.tag {
				flex-shrink: 0;
				padding: 4rpx 10rpx;
				font-size: 16px;
				font-weight: 500;
				border-radius: 4rpx;
				color: var(--ui-BG-Main);
				background: var(--ui-BG-Main-tag);
			}

			.ykw {
				color: #e9b563;
				background: none;
				background-color: rgb(241 236 217 / 50%);
			}
		}

		.vertical-line {
			// width: 1px;
			width: 20px;
			//background-color: #ff6000;
			margin-right: 10px;
			//margin-left: 8px;
			/* flex-grow: 1; */
			align-self: stretch;
		}

		.item-list {
			display: flex;
			flex-direction: column;
			width: 100%;
			/* 条目垂直排列 */
		}

		.title-slot {
			padding-bottom: 15px;
			padding-top: 15px;
			display: flex;
			border-bottom: 1px dotted #e1e1e1;
		}

		.title-slot .courstitle {
			font-size: 18px;
			width: 90%;
		}

		.teacher {
			display: flex;
			margin-top: 18px;
		}

		.content-img {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		.title-slot .coursenum {
			width: 8%;
			font-size: 12px;
			color: #666666;
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: end;
			/* 水平居中 */
		}
	}
</style>